<template>
	<view class="container">
		<view class="">
			<view class="text-15 flex justify-start align-center">
				<scroll-view scroll-x class="bg-white nav text-666 position" style="width: 100%" scroll-with-animation
					:scroll-left="scrollLeft">
					<view class="cu-item" :class="TabCur == 999 ? 'color cur text-bold' : ''" @tap="tabSelect"
						:data-id="999">
						<view>全部</view>
					</view>
					<view class="cu-item" :class="item.id == TabCur ? 'color cur text-bold' : ''"
						v-for="(item, index) in classification1" @tap="tabSelect" :data-id="item.id">
						<view>{{ item.name }}</view>
					</view>
				</scroll-view>
			</view>
			<view style="margin-top: 120rpx">
				<view class="bg-white radius10 padding-sm margin-sm" v-for="(item, index) in list" :key="index">
					<view class="flex justify-between align-center text-bold">
						<view class="text-15 text-333"> 订单编号{{ item.orderNo }} </view>
						<view class="text-sm color">
							<block v-if="item.status == 0">待付款</block>
							<block v-if="item.status == 1">待发货</block>
							<block v-if="item.status == 2">配送中</block>
							<block v-if="item.status == 3">已收货</block>
							<block v-if="item.status == 4">已评价</block>
							<block v-if="item.status == 5">已取消</block>
						</view>
					</view>
					<view @click="
              toPage(
                '/filePage/pages/goods-detail/goods-detail?id=' + val.productId
              )
            " class="flex justify-start margin-top" v-for="(val, i) in item.itemList" :key="val.id">
						<image :src="val.productPic" mode="" style="width: 166rpx; height: 166rpx; min-width: 166rpx">
						</image>
						<view class="margin-left-sm flex-treble">
							<view class="text-13 text-333 flex justify-between">
								<view class="text-cut-2" style="width: 300rpx; max-width: 300rpx">
									{{ val.productName }}
								</view>
								<view class="flex flex-direction align-end">
									<view class="">
										¥ {{ parseFloat(val.price / 100).toFixed(2) }}
									</view>
									<view class="text-999 margin-top-xs"> ×{{ val.num }} </view>
								</view>
							</view>
							<view class="text-sm text-999 margin-top">
								{{ val.productAttr }}
							</view>
							<view class="text-sm text-999 margin-top">
								<text v-if="item.deliveryName">{{ item.deliveryName }}:</text><text
									v-if="item.deliveryNo">{{ item.deliveryNo }}</text>
							</view>
						</view>
					</view>
					<view class="flex justify-end align-center text-df margin-top">
						<view class="text-999">
							总价 ¥{{ parseFloat(item.productAmount / 100).toFixed(2) }} 优惠¥
							{{ parseFloat(item.couponAmount / 100).toFixed(2) }}
						</view>
						<view class="text-333 margin-left-xs">
							实付金额 ¥{{ parseFloat(item.realAmount / 100).toFixed(2) }}
						</view>
					</view>
					<view class="flex justify-end align-center margin-top">
						<button v-if="item.status == 0" @click="cancel(item)"
							class="btn2 round text-13 margin-left text-white text-999">
							取消
						</button>
						<button v-if="item.status == 0" @click="wxPay(item)"
							class="btn2 round text-13 margin-left text-white text-999">
							支付
						</button>
						<button v-if="item.status == 4" @click.stop="
                toPage(
                  '/filePage/pages/orderRecommend/orderRecommend?id=' +
                    item.id +
                    '&type=1'
                )
              " class="btn2 round text-13 margin-left text-white text-999">
							评论列表
						</button>
						<!-- <button  class="btn2 round text-13 text-white margin-left text-999" >取消订单</button> -->
						<button v-if="item.status == 2" @click="checkOutState(item)"
							class="btn2 round text-13 margin-left text-white text-999">
							收货
						</button>
						<button v-if="item.status == 3" class="btn2 margin-left round text-13 text-white text-999"
							@click="
                toPage2(
                  '/filePage/pages/productAddComment/productAddComment?item=',
                    item
                )
              ">
							评论
						</button>
						<!-- <button v-if='item.status==0' class="btn2 margin-left round text-13 text-white color margin-left">去支付</button> -->
					</view>
				</view>
			</view>
		</view>
		<w-picker :visible.sync="visible" mode="selector" :default-props="defaultProps" default-type="id" value="1"
			:options="selectorList" @confirm="onConfirm($event)" @cancel="onCancel" ref="selector">
		</w-picker>
		<passkeyborad :money="money" @message="message" @close="close" :show="show"></passkeyborad>
		<uni-load-more :status="loading" />
	</view>
</template>

<script>
	import BetterPull from "@/common/util/BetterPull";
	import passkeyborad from "@/components/yzc-paykeyboard/yzc-paykeyboard.vue";
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = "loading";
					const obj = {
						pageNum: page,
						pageSize: 10,
						purchaseStatus: 0,
					};
					if (this.TabCur != 999) {
						console.log(this.TabCur);
						obj["status"] = this.TabCur;
					}

					const [err, res] = await this.$get(this.$api.myList, obj);
					if (res) {
						var data = res.data.list;
						done(data);
						if (data.length < 10) {
							this.loading = "noMore";
						} else {
							this.loading = "more";
						}
					}
					if (err) {
						done([]);
						this.loading = "noMore";
					}
				},
			}),
		],
		components: {
			passkeyborad,
		},
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				title: "",
				userId: uni.getStorageSync("userId"),
				status: 1,
				loading: "more",
				serviceType: 3,
				TabCur: "999",
				scrollLeft: 0,
				classification1: [{
						name: "待付款",
						id: "0",
					},
					{
						name: "待发货",
						id: "1",
					},
					{
						name: "配送中",
						id: "2",
					},
					{
						name: "已收货",
						id: "3",
					},
					{
						name: "已评价",
						id: "4",
					},
					{
						name: "已取消",
						id: "5",
					},
				],
				selectorList: [{
						name: "微信",
						id: 1,
					},
					{
						name: "余额支付",
						id: 2,
					},
				],
				defaultProps: {
					label: "name",
					value: "id",
				},
				visible: false,
				id: "",
				show: false,
				password: 0,
				money: 0,
				index: 1,
			};
		},
		onUnload() {
			uni.switchTab({
				url: "/pages/file/file",
			});
		},
		onLoad(options) {
			if (options.title) {
				uni.setNavigationBarTitle({
					title: options.title,
				});
				this.title = options.title;
			}
		},
		methods: {
			checkOut(status) {
				this.status = status;
			},
			close() {
				console.log(111111);
				this.show = false;
			},
			message(password) {
				console.log(password);
				var CusBase64 = require("@/common/js/base64.js");
				//函数调用
				var passWord = CusBase64.CusBASE64.encoder(password);
				this.$get(this.$api.verifyPayPassWord, {
					passWord,
					userId: uni.getStorageSync("userId"),
				}).then((res) => {
					const [err, rs] = res;
					if (rs) {
						const data = {
							orderId: this.id,
						};
						this.$post(this.$api.order_accountPay, data).then((result) => {
							const [err, rs] = result;
							if (rs) {
								this.$util.msg(rs.message);
								this.show = false;
								this.Refresh();
							}
						});
					}
					if (err) {
						this.show = false;
						if (err.message == "请去设置密码！") {
							setTimeout(() => {
								uni.navigateTo({
									url: "/pagesA/pages/setPassword/setPassword",
								});
							}, 1500);
						}
					}
				});
			},
			toPage(url) {
				this.$util.openNewPage(url);
			},
			toPage2(url, item) {
				const obj = {
					id: item.id,
					itemList: item.itemList,
				};
				this.$util.openNewPage(url + JSON.stringify(obj));
			},
			tabSelect(e) {
				if (e.currentTarget.dataset.id != 999) {
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				}
				this.TabCur = e.currentTarget.dataset.id;
				this.Refresh();
			},

			cancel(item) {
				const that = this;
				uni.showModal({
					title: "提示",
					content: "你确定取消该订单吗",
					success: function(res) {
						if (res.confirm) {
							const data = {
								orderId: item.id,
								orderStatus: 5,
							};
							that.$get(that.$api.confrimProduct, data).then((res) => {
								const [err, rs] = res;
								if (rs) {
									that.$util.msg(rs.message);
									that.Refresh();
								}
							});
						} else if (res.cancel) {}
					},
				});
			},

			checkOutState(item) {
				const that = this;
				uni.showModal({
					title: "提示",
					content: "你确定收货吗",
					success: function(res) {
						if (res.confirm) {
							const data = {
								orderId: item.id,
								orderStatus: 3,
							};
							that.$get(that.$api.confrimProduct, data).then((res) => {
								const [err, rs] = res;
								if (rs) {
									that.$util.msg(rs.message);
									that.Refresh();
								}
							});
						} else if (res.cancel) {}
					},
				});
			},
			wxPay(item) {
				this.visible = true;
				this.id = item.id;
				this.money = item.realAmount;
			},
			onCancel() {
				this.visible = false;
			},
			async onConfirm(item) {
				const that = this;
				// #ifdef  MP-WEIXIN
				const data = {
					orderId: this.id,
					payWay: 1,
					appId: this.$config.wxAppId,
					openId: uni.getStorageSync('openid')
				};
				// #endif
				// #ifdef  APP-PLUS
				const data = {
					orderId: this.id,
					payWay: 2,
					appId: this.$config.appId,
					openId: uni.getStorageSync('openid')
				};
				// #endif

				console.log(item);
				if (item.obj.id == 1) {
					const [error, rs] = await this.$post(this.$api.order_wxPay, data);
					if (rs) {
						console.log(rs);
						// uni.hideLoading();
						const data = rs.data;
						// #ifdef  MP-WEIXIN
						uni.requestPayment({
							provider: "wxpay",
							appId: data.appId,
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data._package,
							signType: data.signType,
							paySign: data.paySign,
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
								that.Refresh();

							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							},
						});
						// #endif

						// #ifdef  APP-PLUS
						uni.requestPayment({
							"provider": "wxpay",
							"orderInfo": {
								"appid": data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								"noncestr": data.nonceStr, // 随机字符串
								"package": data._package, // 固定值
								"partnerid": data.partnerid, // 微信支付商户号
								"prepayid": data.prepayid, // 统一下单订单号 
								"timestamp": data.timeStamp, // 时间戳（单位：秒）
								"sign": data.sign // 签名，这里用的 MD5 签名
							},
							success(res) {
								that.Refresh();
							},
							fail(e) {}
						})
						// #endif
					}
				} else {
					this.show = true;
					// const [error, res] = await this.$post(this.$api.order_accountPay, data);
					// if (res) {
					// 	// console.log(res);
					// 	this.$util.msg(res.message)
					// 	 that.Refresh()
					// 	uni.hideLoading();

					// }
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.tabs {
		view {
			border-bottom: 6rpx solid #fff;
		}

		.on {
			font-weight: bold;
			color: #221815;
			border-bottom: 6rpx solid #ed7200;
		}
	}

	.btn {
		padding: 20rpx 50rpx;
	}

	.btn2 {
		padding: 20rpx 24rpx;
		border: 2rpx solid;
	}

	.cur>view {
		border-bottom: 4rpx solid;
		width: 100%;
		height: 100%;
	}

	.nav .cu-item.cur {
		border-bottom: 0;
	}

	.position {
		position: fixed;
		background-color: #fff;
		z-index: 99;
		top: 0rpx;
	}

	.flex-direction-row {
		justify-content: space-around;
		flex-direction: row;
	}

	.flex-direction-row>view {
		flex: 1;
		text-align: left;
	}
</style>
